import { ref, reactive, computed } from "vue";
import { defineStore } from "pinia";

export const useAppStore = defineStore("app", () => {
	const layout = reactive({
		row: 1,
		col: 1
	});

	// const currentStudy = ref(null);
	const currentDisplayer = ref(null);
	const showCornerText = ref(true);
	const showOrientText = ref(true);
	const showRuler = ref(false);
	const showOverlay = ref(false);
	const showCrossLine = ref(false);
	const blendMode = ref("MIP");
	const cursor3d = ref(false);
	const theme = ref("light");
	const navbarPos = ref("left");
	const toolbarPos = ref("right");
	const syncOperation = reactive({
		syncWindow: false,
		syncPan: false,
		syncZoom: false,
		syncRoll: false
	});

	let toolBindings = reactive({
		window: 1,
		zoom: 2,
		pan: 4,
		scroll: 0,
		measure: 0,
		measureType: "Length"
	});

	const pageSize = computed(() => {
		return layout.row * layout.col;
	});

	const customWWWL = reactive([]);

	return {
		layout,
		// currentStudy,
		currentDisplayer,
		showCornerText,
		showOrientText,
		showRuler,
		showOverlay,
		showCrossLine,
		blendMode,
		cursor3d,
		theme,
		navbarPos,
		toolbarPos,
		pageSize,
		customWWWL,
		syncOperation,
		toolBindings
	};
});
